<!DOCTYPE html>
<html>

<head>
	<title> </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style>
		body {
			font-family: '宋体';
			font-size: 16px;
			color: black;
			margin: 0;
			padding: 0;

		}

		.div-card {
			margin: 0;
			padding: 0;
			text-align: center;
			position: relative;
			page-break-after: always;
			width: 210mm;
			padding-top: 5mm;
			padding-left: 5mm;
			height: 140mm;
		}

		.div-title {
			text-align: center;
			font-size: 22px;
			font-weight: bold;
		}

		table {
			border-collapse: collapse;
		}

		table tr td {
			height: 11mm;
		}

		.table-footer tr td {
			font-size: 16px;
			height: auto;
		}

		.span-margin {
			margin-right: 15px;
		}

		@media print {
			body {
				-webkit-print-color-adjust: exact;
			}
		}
	</style>

	<style type="text/css" media="print">
		@page {
			margin: 0;
			size: A5 landscape;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="div-card" v-for="(tableinfo,aIndex) in tableData">
			<div class="div-title">
				<div>{{info.companyname}}采购退货单</div>
			</div>
			<div>
				<table border="0">
					<tr>
						<td style="width: 80mm;text-align: left;">供应商名称:{{info.order.CustomerName}}</td> 
						<td style="width: 80mm;text-align: left;"> 日期:{{ dateformat(info.order.OrderDate,'yyyy年MM月dd日')}}</td>
					</tr>

				</table>
			</div>
			<table border="1">

				<tr>
					<td style="width: 15mm;">编号 </td>
					<td style="width: 50mm;">商品</td> 
					<td style="width: 20mm;">数量</td> 
					<td style="width: 20mm;">单位</td> 
					<td style="width: 25mm;">单价(元)</td>
					<td style="width: 25mm;">金额(元)</td>
					<td style="width: 40mm;">备注</td>
				</tr>
				<tr v-for="(item,index) in tableinfo" :key="item.Id"   >
					<td>{{ aIndex*6 + index+1}}</td>
					<td>{{item.ProductName}}</td> 
					<td>{{item.Num}}</td> 
					<td>{{item.Unit}}</td> 
					<td>{{item.Price}}</td>
					<td>{{item.Amount}}</td>
					<td>{{item.Remark}}</td>
				</tr>
				<template v-if="tableinfo.length<6">
					<tr  v-for="item in (6-tableinfo.length)" :key="item">
						<td></td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td> 
					</tr>
				</template>
			
				<tr>
					<td rowspan="2" colspan="2">合计</td>
					<td colspan="7"> 
						<span class="span-margin">合计:{{info.order.Amount}}元</span>  
						<span class="span-margin" v-if="info.order.GiveupFee!=0">扣减金额:{{info.order.GiveupFee}}元</span>


					</td>
				</tr>
				<tr>
					<td colspan="7">
						<span class="span-margin">累计金额:{{info.order.AllFee}}元</span>
						<span class="span-margin" v-if="info.order.PayFee>0">实退金额:{{info.order.PayFee}}元</span> 

					</td>
				</tr>
			</table>
			<table border="0" class="table-footer">
				<tr v-for="item in printtags">
					<td v-for="jtem in item" style="width: 100mm;text-align: left;">{{jtem.ItemKey}}：{{jtem.ItemValue}}
					</td>
				</tr>


			</table>
		</div>

	</div>
	<script src="../../js/vue.min.js"></script>
	<script language="javascript" type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				info: {
					printtag: [],
					order: {
						CustomerBalance: 0,
						Amount: 0,
						FreightFee: 0,
						EditionFee: 0,
						GiveupFee: 0,
						AllFee: 0,
					},
					detail: []
				},

			},
			computed: {
				currentBalanceShow() {
					var currentBalance = (Number(this.info.order.CustomerBalance) - Number(this.info.order.AllFee) + Number(this.info.order.PayFee))
					if (currentBalance <= 0) {
						return '当前欠款：' + Number(Math.abs(currentBalance).toFixed(2))
					} else {
						return '当前结余：' + Number(Math.abs(currentBalance).toFixed(2))
					}
				},
				currentMoneyShow() {
					var currentBalance = (Number(this.info.order.CustomerBalance) - Number(this.info.order.AllFee) + Number(this.info.order.PayFee))
					if (currentBalance <= 0) {
						return '总计金额：' + Number(Math.abs(currentBalance).toFixed(2))
					} else {
						return '结余金额：' + Number(Math.abs(currentBalance).toFixed(2))
					}
				},
				lastBalanceShow() {
					if (this.info.order.CustomerBalance <= 0) {
						return '上次欠款：' + Math.abs(this.info.order.CustomerBalance)
					} else {
						return '上次结余：' + this.info.order.CustomerBalance
					}

				},
				printtags () {
					let index = 1;
					let count = 2;
					let arrTemp = [];
					if (this.info.printtag.length > 1) {
						for (let i = 0; i < this.info.printtag.length; i++) {
							index = parseInt(i / count);
							if (arrTemp.length <= index) {
								arrTemp.push([]);
							}
							arrTemp[index].push(this.info.printtag[i])
						}
					}
					return arrTemp
				},
				tableData(){
					let index = 0;
					let count = 6;
					let arrTemp = [];

					for (let i = 0; i < this.info.detail.length; i++) {
						index = parseInt(i / count);
						if (arrTemp.length <= index) {
							arrTemp.push([]);
						}
						arrTemp[index].push(this.info.detail[i])
					}
					return arrTemp
				}
			},
			methods: {
				noPassByName(str) {
					if (null != str && str != undefined) {
						if (str.length <= 3) {
							return str.substring(0, 1) + "*";
						} else {
							return str.substring(2, 2) + "**";
						}
					} else {
						return "";
					}
				},
				dateformat(dtStr, fmt) { //author: meizz 
					if (!dtStr) {
						return "";
					}
					if (dtStr.indexOf('年') > -1 && dtStr.indexOf('-') < 0) {
						return dtStr;
					}
					var dt = new Date(dtStr);
					var o = {
						"M+": dt.getMonth() + 1, //月份 
						"d+": dt.getDate(), //日 
						"h+": dt.getHours(), //小时 
						"m+": dt.getMinutes(), //分 
						"s+": dt.getSeconds(), //秒 
						"q+": Math.floor((dt.getMonth() + 3) / 3), //季度 
						"S": dt.getMilliseconds() //毫秒 
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
							"00" + o[k])
							.substr(("" + o[k]).length)));
					return fmt;
				}
			}
		});
		function printData(info) {
			app.info = info;
			setTimeout(() => {
				window.print();

			}, 500)

		}
	</script>
</body>

</html>